import React, { useState, useEffect, useRef } from'react';
import { useNavigate } from'react-router-dom';
import styles from '../css/prize.module.css';
import backimg from '../assets/backimg.png';
import right from '../assets/right.png';
import hourse3 from "../assets/hourse3.png";
import leftImg from "../assets/left.png";

const Prize = () => {
    const navigate = useNavigate();
    const [showLogoutModal, setShowLogoutModal] = useState(false);

    const handleFirstClick = () => {
        navigate('/home');
    };

    const handleLeftClick = () => {
        navigate('/mine');
    };

    // 显示退出登录确认弹窗
    const handleLogout = () => {
        setShowLogoutModal(true);
    };

    // 取消退出登录
    const cancelLogout = () => {
        setShowLogoutModal(false);
    };

    // 确认退出登录
    const confirmLogout = () => {
        // 清除sessionStorage中的用户信息
        sessionStorage.removeItem('mine');
        sessionStorage.removeItem('token'); // 如果有token也需要清除
        
        // 导航到登录页面
        navigate('/login');
    };

    useEffect(() => {
        const mineData = sessionStorage.getItem('mine');
        let parsedMineData;
        try {
            parsedMineData = JSON.parse(mineData);
            console.log('临时存储中的 mine 数据解析后为:', parsedMineData);
        } catch (error) {
            console.log('解析 mine 数据失败:', error);
            parsedMineData = mineData;
        }
    }, []);

    return (
        <div className={styles.big}>
            {/* 顶部导航栏 */}
            <div className={styles.top}>
                <div style={{ 
                    display: "flex", 
                    alignItems: "center", 
                    justifyContent: "space-between", 
                    width: "100%", 
                    padding: "0 16px" 
                }}>
                    <div className={styles.lefts}>
                        <img src={leftImg} alt="" onClick={handleLeftClick} />
                        <div className={styles.line}></div>
                        <img id="hourse" src={hourse3} alt="" onClick={handleFirstClick} />
                    </div>
                    <p style={{ flex: 1, textAlign: "center" }}>个人信息</p> 
                    <div style={{ width: 65 }}></div> 
                </div>
            </div>
            
            {/* 内容区域 */}
            <div style={{ paddingTop: '50px' }}>
                {/* 个人信息展示 */}
                <div className={styles['info-item']}>
                    <span className={styles['info-label']}>昵称:</span>
                    <span className={styles['info-content']}>{sessionStorage.getItem('mine')? JSON.parse(sessionStorage.getItem('mine')).nickname : '暂无数据'}</span>
                </div>
                <div className={styles['info-item']}>
                    <span className={styles['info-label']}>性别:</span>
                    <span className={styles['info-content']}>女</span>
                </div>
                <div className={styles['info-item']}>
                    <span className={styles['info-label']}>生日:</span>
                    <span className={styles['info-content']}>暂无数据</span>
                </div>
                <div className={styles['info-item']}>
                    <span className={styles['info-label']}>手机号:</span>
                    <span className={styles['info-content']}>{sessionStorage.getItem('mine')? JSON.parse(sessionStorage.getItem('mine')).tel : '暂无数据'}</span>
                </div>
                <div className={styles['info-item']}>
                    <span className={styles['info-label']}>介绍:</span>
                    <span className={styles['info-content']}>暂无数据</span>
                </div>
                
                {/* 退出登录按钮 */}
                <button className={styles['logout-btn']} onClick={handleLogout}>
                    退出登录
                </button>
            </div>
            
            {/* 退出登录确认弹窗 */}
            {showLogoutModal && (
                <div className={styles['modal-overlay']}>
                    <div className={styles['modal-content']}>
                        {/* <div className={styles['modal-header']}>
                            <h3>确认退出登录</h3>
                        </div> */}
                        <div className={styles['modal-body']}>
                            <p>是否确认退出</p>
                        </div>
                        <div className={styles['modal-footer']}>
                            <button className={styles['modal-cancel-btn']} onClick={cancelLogout}>
                               否
                            </button>
                            <button className={styles['modal-confirm-btn']} onClick={confirmLogout}>
                                是
                            </button>
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
};

export default Prize;